<template>
  <div class="carousel-container">
    <!-- 轮播图片容器 -->
    <div class="carousel-images" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
      <img 
        v-for="(image, index) in images" 
        :key="index" 
        class="carousel-image" 
        :src="image.src" 
        alt="Carousel Image"
      />
    </div>

    <!-- 轮播指示器 -->
    <div class="carousel-dots">
      <span 
        v-for="(image, index) in images" 
        :key="index" 
        :class="['dot', { active: currentIndex === index }]"
        @click="goToSlide(index)"
      ></span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      images: [
        { src: require('@/assets/background.jpg') },
        { src: require('@/assets/background.jpg') },
        { src: require('@/assets/background.jpg') }
      ]
    };
  },
  mounted() {
    this.startAutoSlide();
  },
  methods: {
    startAutoSlide() {
      this.interval = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.images.length;
      }, 3000);
    },
    goToSlide(index) {
      this.currentIndex = index;
      clearInterval(this.interval);
      this.startAutoSlide();
    }
  },
  beforeDestroy() {
    clearInterval(this.interval);
  }
};
</script>

<style scoped>
.carousel-container {
  position: relative;
  width: 100%;
  height: 550px;
  overflow: hidden;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.carousel-images {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保图片铺满容器 */
  flex-shrink: 0;
  border-radius: 10px; /* 圆角效果 */
  display: block; /* 避免 inline 元素的默认行为 */
}

.carousel-dots {
  position: absolute;
  bottom: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.dot {
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}

.dot.active {
  background-color: #fff;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .carousel-container {
    height: 300px;
  }

  .carousel-image {
    height: 100%;
  }
}

@media (max-width: 480px) {
  .carousel-container {
    height: 200px;
  }

  .carousel-image {
    height: 100%;
  }
}
</style>